<script setup lang="ts">
import { ref } from '@vue/reactivity';
import returnHeader from '../components/returnHeader.vue';
import vShare from "../components/share.vue"
let value = ref<string>('')
let isShow = ref<boolean>(false)
const collectArticle = () => {
    isShow.value = !isShow.value
}
</script>

<template>
    <div class="readViewContainer">
        <return-header :title="'阅读'" />
        <div class="content">
            <h2>为了告别的聚会</h2>
            <div style="color:#999">文 / 罗翔</div>
            <p>
                河山万里，春色无边，东风带着细雨姗姗而来，听说，城南的梨花开了，微雨赏梨花，去看那一树树的洁白，聆听这花开的声音，甚是好景。
                城南的梨花果然开了，原来听说与看到的惊喜，竟是如此的一致。当看到满树满树的花，是心跳加速，无以言表。真的应了那句“忽如一夜春风来，千树万树梨花开。”
                梨花的貌。
            </p>
            <p>
                “桃花人面各相红，不及天然玉作容。”洁白如雪，花蕊点点淡黄含春。花瓣薄如蝉翼，晶莹如水，风来入林，梨雨纷纷，漫天飞花，极致浪漫。
                梨花的姿。
            </p>
            <p>
                “粉淡香清自一家，未容桃李是年华，常思南郑清明路，醉袖迎风雪一杈。”一片片，一簇簇，一朵朵，如白雪般在枝头上亭亭玉立，春风轻轻拂过，临风微微颤动，梨花带雨，楚楚动人。嫩叶作裳，玉容迎着微微春光，正在发着白光，如花仙子般圣洁，明亮。
                梨花的香。
            </p>
            <p>
                “冷艳金歇雪，余香乍入衣。”无桂花之馥郁，无兰花之幽远，无梅花之馨香。梨花只是淡淡的甜香。小时候，看到满眼的梨花，闻着梨花的清甜香味，就仿佛看到了满树的梨子，已经让人不自觉地想快点尝到梨子的清甜。念念不忘，那年春雨过后，梨花挂着雨珠，香味清甜，我问：“外婆，梨花开了，什么时候有梨子吃啊。”外婆看着一簇簇的梨花，笑着说：“小馋猫，快了。”，外婆的笑混着梨花的甜香渐渐模糊。长大后，有了很多的愁，有了很多的苦。随着时间扑面而来，我们学着释怀，健康的活着，平静的过着，开心的笑着，适当的忙着，就很好。生活有点苦，我们需要怀念那梨花，甜甜的香。
                梨花的雅。
            </p>
            <p>
                “惊飞远映碧山去，一树梨花落晚风。”不施粉黛，却引人沉醉。圣洁如仙子，却落入凡间。梨花的雅，是纯素净白，不染风尘；梨花的雅，是玉洁冰清，清新可人；梨花的雅，是不觉寒苦，但感温柔。跌入梨花花海，与梨花撞了个满怀、满身、满心。如脱了俗般无欲不争，静化心灵。
                站在梨花树下，独自欣赏，无人作陪，些许落寞。能读懂梨花的，能有几人。思及故人，已然远去。雨丝寄愁，梨白情伤。
                道仓桑，千姿百态，轻风微雨，随着流年似水，渐渐地化作淡淡的忧思。人已离去，再也难见，梨花年年白，只有留下的那个人轻吟慢尝。
                罢了，就让这城南的梨花一同入梦，梦里，再见亦是香甜。
            </p>
        </div>
        <div class="readViewBottom">
            <div class="comment">
                <van-field v-model="value" placeholder="请写下一个评论" />
            </div>
            <div class="option-item">
                <span :class="isShow? 'iconfont icon-yiguanzhu active':'iconfont icon-weiguanzhu'" @click="collectArticle"></span> 
                <span class="number">1422</span>
            </div>
            <div class="option-item">
                <span class="iconfont icon-faxiaoxi"></span> 
            </div>
            <div class="option-item iconfont icon-31zhuanfa"></div>
        </div>
    </div>
    <v-share ></v-share>
</template>

<style lang="less">
.readViewBottom {
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 70px;
    line-height: 70px;
    border-top: 1px solid #dbdbdb;
    background: #f5f5f5;
    display: flex;
    justify-content: space-around;
    .van-cell {
        margin-top: 10px;
        border: 1px solid #666;
        border-radius: 6px;
    }
    .iconfont {
        font-size: 25px;
        color: #999;
    }
    .active {
        color: red;
    }
}
.readViewContainer {
    margin-bottom: 100px;
    .content {
        margin: 20px;
        margin-top: 60px;
    }
}
</style>